﻿<template>
  <div>
    <h1>Vue Watch Properties Example</h1>
    <p>a: {{ a }}</p>
    <button @click="a++">Increment a</button>
    <p>b: {{ b }}</p>
    <button @click="b++">Increment b</button>
    <p>c.d: {{ c.d }}</p>
    <button @click="incrementD">Increment c.d</button>
    <p>e: {{ e }}</p>
    <p>f: {{ f }}</p>
    <button @click="f++">Increment f</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 4
      },
      e: 5,
      f: 6
    };
  },
  watch: {
    a(val, oldVal) {
      console.log(`a changed from ${oldVal} to ${val}`);
    },
    b: 'logBChange',
    c: {
      handler(val) {
        console.log('c changed', val);
      },
      deep: true
    },
    'c.d': function (val, oldVal) {
      console.log(`c.d changed from ${oldVal} to ${val}`);
    },
    e: {
      handler(val, oldVal) {
        console.log(`e changed from ${oldVal} to ${val}`);
      },
      immediate: true
    },
    f: [
      function handle1(val) {
        console.log(`f handle1: ${val}`);
      },
      function handle2(val) {
        console.log(`f handle2: ${val}`);
      },
      {
        handler(val) {
          console.log(`f handle3: ${val}`);
        }
      }
    ]
  },
  methods: {
    logBChange(newVal) {
      console.log(`b changed to ${newVal}`);
    },
    incrementD() {
      this.c.d++;
    }
  }
}
</script>

<style scoped>
button {
  margin-top: 10px;
  margin-right: 10px;
}
</style>
